<template>

	<view class="login-container">
		<!-- 页面标题 -->
		<view class="page-title">账号登录</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 用户名输入 -->
			<view class="input-item">
				<input type="text" placeholder="请输入用户名" bindinput="onUsernameInput" v-model="loginname" />
			</view>

			<!-- 密码输入 -->
			<view class="input-item">
				<input type="password" placeholder="请输入密码" bindinput="onPasswordInput" v-model="password"
					password="true" />
			</view>


			<!-- 登录按钮 -->
			<button class="login-btn" @click="login">登录</button>

			<!-- 注册链接 -->
			<view class="register-link">
				<text>还没有账号？</text>
				<text class="link" @click="goreg">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	let loginname = ref("");
	let password = ref("")
	onLoad((option) => {})

	function login() {
		console.log("dianji")
		uni.request({
			url: "https://www.xuzhixiang.top:30001/api/user/login",
			method: "POST",
			data: {
				loginname: loginname.value,
				password: password.value
			},
			success: (res) => {
				console.log(res)
				console.log(res.data.data.token)
				uni.setStorage({
					key: "token",
					data: res.data.data.token
				})
				uni.setStorage({
					key: "userid",
					data: res.data.data.userid
				})
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
		})
	}

	function goreg() {
		uni.navigateTo({
			url: "/pages/reg/reg"
		})
	}
</script>

<style>
	.login-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 80rpx 40rpx;
		box-sizing: border-box;
	}

	/* 页面标题 */
	.page-title {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 80rpx;
	}

	/* 表单区域 */
	.form-container {
		width: 100%;
		max-width: 500rpx;
	}

	/* 输入项 */
	.input-item {
		display: flex;
		align-items: center;
		background-color: white;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	/* 图标包装器 */
	.icon-wrapper {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.icon-wrapper image {
		width: 30rpx;
		height: 30rpx;
	}

	/* 输入框 */
	.input-item input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.input-item input::placeholder {
		color: #999;
	}

	/* 选项行 */
	.options-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		font-size: 24rpx;
		color: #666;
	}

	/* 记住密码 */
	.remember-password {
		display: flex;
		align-items: center;
	}

	.checkbox {
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid #ccc;
		border-radius: 6rpx;
		margin-right: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.checkbox.checked {
		border-color: #e64340;
		background-color: #fff2f2;
	}

	.checkbox-icon image {
		width: 15rpx;
		height: 15rpx;
	}

	/* 忘记密码 */
	.forgot-password {
		color: #e64340;
	}

	/* 登录按钮 */
	.login-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #e64340;
		color: white;
		font-size: 32rpx;
		border-radius: 45rpx;
		margin-bottom: 30rpx;
	}

	.login-btn::after {
		border: none;
	}

	/* 注册链接 */
	.register-link {
		text-align: center;
		font-size: 28rpx;
		color: #666;
	}

	.link {
		color: #e64340;
		margin-left: 8rpx;
	}
</style>